<template>
  <div class="content">
    <h3 class="title">管理员配置</h3>
    <div class="addAdmin">
      <el-button type="primary" @click="dialogVisible = true"
        >添加管理员</el-button
      >
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="aid" label="编号" width="50"> </el-table-column>
        <el-table-column prop="aname" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="aphone" label="手机号" width="150">
        </el-table-column>
        <el-table-column prop="starttime" label="开通时间" width="200">
        </el-table-column>
        <el-table-column prop="permission" label="权限"> </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="管理员设置"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="aname">
          <el-input type="text" v-model="ruleForm.aname"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="aphone">
          <el-input type="phone" v-model="ruleForm.aphone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="apwd">
          <el-input type="password" v-model="ruleForm.apwd"></el-input>
        </el-form-item>
        <h4>权限设置</h4>
        <el-form-item label="成员管理">
          <el-checkbox-group v-model="form.member">
            <el-checkbox label="主持人管理" name="member"></el-checkbox>
            <el-checkbox label="婚庆公司管理" name="member"></el-checkbox>
            <el-checkbox label="新人管理" name="member"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="成员订单中心">
          <el-checkbox-group v-model="form.order">
            <el-checkbox label="主持人订单中心" name="order"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="内容管理">
          <el-checkbox-group v-model="form.content">
            <el-checkbox label="banner管理" name="content"></el-checkbox>
            <el-checkbox label="首页推荐管理" name="content"></el-checkbox>
            <el-checkbox label="底部文案" name="content"></el-checkbox>
            <el-checkbox label="合作伙伴管理" name="content"></el-checkbox>
            <el-checkbox label="加入团队介绍文案" name="content"></el-checkbox>
            <el-checkbox label="关于团队介绍文案" name="content"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="后台管理">
          <el-checkbox-group v-model="form.manager">
            <el-checkbox label="管理员配置" name="manager"></el-checkbox>
            <el-checkbox label="主持人等级设置" name="manager"></el-checkbox>
            <el-checkbox label="管理费记录" name="manager"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from "../../api";
export default {
  name: "Admain",
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      ruleForm: {
        anme: "",
        aphone: "",
        apwd: "",
      },
      form: {
        member: [],
        order: [],
        content: [],
        manager: [],
      },
    };
  },
  methods: {
    http() {
      api.selectAdmin().then((res) => {
        if (res.status === 200) {
          this.tableData = res.data;
        }
      });
    },
    handleEdit(index, row) {
      this.dialogVisible = true;
      api
        .preUpdate({
          aid: row.aid,
        })
        .then((res) => {
          if (res.status === 200) {
            this.ruleForm = {
              aname: res.data.result[0].aname,
              apwd: res.data.result[0].apwd,
              aphone: res.data.result[0].aphone,
            };
          }
        });
      api
        .adminUpdate({
          aid: row.aid,
          aname: this.ruleForm.aname,
          apwd: this.ruleForm.apwd,
          aphone: this.ruleForm.aphone,
        })
        .then((res) => {
          if (res.data.status === 200) {
            this.dialogVisible = false;
            // this.initForm();
          }
          // else {
          //   this.$message.error(res.data.msg);
          // }
        });
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api
            .adminDelete({
              aid: row.aid,
            })
            .then((res) => {
              console.log(res);
              if (res.status === 200) {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                });
                this.http();
              }
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: res.data.msg,
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    sureHandle() {
      var permission = [
        ...this.form.member,
        ...this.form.order,
        ...this.form.content,
        ...this.form.manager,
      ];
      api
        .addAdmin({
          aname: this.ruleForm.aname,
          aphone: this.ruleForm.aphone,
          apwd: this.ruleForm.apwd,
          permission: permission.toString(),
        })
        .then((res) => {
          if (res.status === 200) {
            this.$message.success(res.data.msg);
            this.dialogVisible = false;
            this.http();
          }
        });
    },
    /**
     * 初始化
     */
    /* initForm() {
      this.ruleForm = {
        aname: "",
        apwd: "",
        aphone: "",
      };
      this.form = {
        member: [],
        order: [],
        content: [],
        manager: [],
      };
    }, */
  },
  mounted() {
    this.http();
    // 预更新
  },
};
</script>

<style lang="less" scoped>
.content {
  margin-left: 20px;
  .title {
    text-align: center;
    padding: 20px;
    background-color: #c4b4a9;
    margin-bottom: 10px;
  }
}
.addAdmin {
  float: left;
  height: 50px;
  margin-left: 20px;
}
.table {
  margin-top: 20px;
}
</style>